<template>
    <div class="goods">
        <ul>
            <li>
                <
            </li>
            <li v-for="(item,index) in goodsList":key="item.id"@click="goDetail">
                <div class="goods-top">
                    <img :src="item.imgUrl" alt="" />
                    <div class="goods-icon">
                        <img class="left" :src="item.leftUrl" alt="" />
                        <img class="right" :src="item.rightUrl" alt="" />
                    </div>
                    <div class="goods-actor">
                        <img :src="item.actor" alt="">
                        <span class="actorname">{{ item.actorname }}</span>
                        <span class="actortag">{{ item.actortag }}</span>
                    </div>
                </div>
                <div class="goods-bottom">
                    <h3>{{ item.name }}</h3>
                    <div class="price">
                        <span class="fuhao">￥</span>
                        <span class="jine">{{ item.price }}</span>
                        <span class="baoyou">
                            <img :src="item.byUrl" alt="">

                        </span>
                        <span class="xiaoliang">销量999</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <Tabbar></Tabbar>
</template>
<script setup>
import Tabbar from '../components/common/Tabbar.vue';


let goodsList=[{
    id:1,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:2,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:3,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:4,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:5,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:6,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:7,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:8,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:9,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:10,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:11,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:12,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:13,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:14,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:15,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:16,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:17,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:18,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:19,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:20,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:21,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:22,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:23,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:24,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:25,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:26,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:27,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:28,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:29,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
},{
    id:30,
    name:'甜美格式小睡衣',
    actor:'.images/11/png',
    actorname:'小甜心',
    actortag:'爆单女王',
    price:'199',
    sales:500,
    imgUrl:'./images/11.png',
    leftUrl:'../images/12.png',
    rightUrl:'../images/13.png',
    byUrl:'../images/14.png',
}
]
import {useRouter} from 'vue-router'
	let router = useRouter()
	const goDetail = ()=>{
		router.push('/detail')
	}



</script>


<style scoped>
.goods{
    width: 100%;
    height: 800rem;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.1875rem;
}
.goods ul{
    display: flex;
    flex-wrap: wrap;

}
.goods ul li {
    width: calc(50% - 0.25);
    border-radius: 0.4125rem;
    overflow: hidden;
    background-color: #fff;
    margin: 0.125rem;
}
.goods ul li .goods-top img{
width: 100%;
height: 10.7rem;


}
.goods ul li .goods-top{
    position: relative;
    height: 12.5rem;

}
.goods ul li .goods-top .goods-icon .left{
    position: absolute;
    top: 0rem;
    left: 0.25rem;
    height: 2rem;
    width: 1.2rem;
}
.goods ul li .goods-top .goods-icon .right{
    position: absolute;
    top: 0.25rem;
    left: 9rem;
    height: 1.6rem;
    width: 1.2rem;
    
}
.goods ul li .goods-top .goods-actor{
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    width: 100%;
    height: 4.5rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.goods ul li .goods-top .goods-actor img{
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-right: 0.125rem;

}
.goods ul li .goods-top .goods-actor .actorname{
    font-size: 0.7rem;
    margin-right: 0.125rem;
    color:#f4f4f4;

}
.goods ul li .goods-top .goods-actor .actortag{
    font-size: 0.7rem;
    background-color: rgba(0, 0, 0, .5);
    color: rgb(245, 240, 243);
    border-radius: 0.0625rem;

}
.goods ul li  .goods-bottom{
    width: 100%;
    padding: 0.1875rem;
    box-sizing: border-box;

}
.goods ul li  .goods-bottom h3{
    font-size: 0.7rem;
    font-weight: 100rem;
margin-top: -2rem;
}
.goods ul li  .goods-bottom .price{
    width: 100%;
    height: 0.625rem;
    position: relative;
    margin-bottom: 0.3125rem;

}
.goods ul li  .goods-bottom .price .fuhao{
    font-size: 1rem;
    color: #f46;
}
.goods ul li .goods-bottom .price .jine{
    font-size: 1rem;
    color: #f46;
}
.goods ul li  .goods-bottom .price .baoyou img{
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 0.1875rem;
    

}
.goods ul li  .goods-bottom .price .xiaoliang{
    padding: 0.0625rem;
    font-size: 0.6rem;
    background-color: #ffecef;
    color: #f46;
    position: absolute;
    right: 0;
    top: -0.3rem;
    border-radius: 0.3125rem;
}
</style>
